<!doctype html>
<!--
  backgrid
  http://github.com/wyuenho/backgrid

  Copyright (c) 2013 Jimmy Yuen Ho Wong and contributors
  Licensed under the MIT @license.
 -->
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge;chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/>
    <meta name="keywords" content="backgrid,backgrid.js,backbone,backbone.js,datagrid,grid,paginator,javascript" />
    <meta name="description" content="A powerful widget set for building data grids with Backbone.js" />

    <meta property="og:title" content="Backgridjs" />
    <meta property="og:description" content="A powerful widget set for building data grids with Backbone.js" />
    <meta property="og:url" content="http://backgridjs.com" />
    <meta property="og:image" content="http://backgridjs.com/img/backgrid-logo.png" />

    <title>Backgrid.js - Styling</title>

    <link rel="canonical" href="http://backgridjs.com" />

    <link rel="stylesheet" href="/build/build.min.css" />
    <!--[if lt IE 9]>
      <script src="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.7.1/modernizr.min.js"></script>
      <script src="//cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.js"></script>
    <![endif]-->
  </head>
  <body>
    <div id="main">
      <header>
        <div class="navbar navbar-default navbar-fixed-top">
          <div class="container">
            <div class="navbar-header">
              <a href="/"
                 class="navbar-brand" title="A powerful widget set for building data grids with Backbone.js">Backgrid.js</a>
              <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>
            </div>
            <div class="navbar-collapse collapse">
              <ul class="nav navbar-nav">
                <li class="dropdown">
                  <a class="dropdown-toggle" data-toggle="dropdown" data-target="#" href="#">
                    Introduction
                    <b class="caret"></b>
                  </a>
                  <ul class="dropdown-menu">
                    <li><a href="/index.html#features">Features</a></li>
                    <li><a href="/index.html#getting-started">Getting Started</a></li>
                    <li><a href="/index.html#basic-example">Basic Example</a></li>
                    <li><a href="/index.html#complete-example">Complete Example</a></li>
                  </ul>
                </li>
                <li class="dropdown">
                  <a class="dropdown-toggle" data-toggle="dropdown" data-target="#" href="#">
                    Core API
                    <b class="caret"></b>
                  </a>
                  <ul class="dropdown-menu">
                    <li><a href="/ref/forewords.html">Forewords</a></li>
                    <li class="divider"></li>
                    <li><a href="/ref/grid.html">Grid</a></li>
                    <li><a href="/ref/column.html">Column</a></li>
                    <li><a href="/ref/cell.html">Cell</a></li>
                    <li><a href="/ref/formatter.html">Formatter</a></li>
                    <li><a href="/ref/header.html">Header</a></li>
                    <li><a href="/ref/row.html">Row</a></li>
                    <li><a href="/ref/body.html">Body</a></li>
                    <li><a href="/ref/footer.html">Footer</a></li>
                  </ul>
                </li>
                <li class="dropdown">
                  <a class="dropdown-toggle" data-toggle="dropdown" data-target="#" href="#">
                    Extensions
                    <b class="caret"></b>
                  </a>
                  <ul class="dropdown-menu">
                    <li><a href="/ref/extensions/development.html">Development Guide</a></li>
                    <li class="divider"></li>
                    <li><a href="/ref/extensions/select-all.html">SelectAll</a></li>
                    <li><a href="/ref/extensions/paginator.html">Paginator</a></li>
                    <li><a href="/ref/extensions/filter.html">Filter</a></li>
                    <li><a href="/ref/extensions/text-cell.html">TextCell</a></li>
                    <li><a href="/ref/extensions/moment-cell.html">MomentCell</a></li>
                    <li><a href="/ref/extensions/select2-cell.html">Select2Cell</a></li>
                    <li class="divider"></li>
                    <li><a href="https://github.com/wyuenho/backgrid/wiki#extensions">More</a></li>
                  </ul>
                </li>
                <li class="dropdown">
                  <a class="dropdown-toggle" data-toggle="dropdown" data-target="#" href="#">
                    More Info
                    <b class="caret"></b>
                  </a>
                  <ul class="dropdown-menu">
                    <li><a href="/misc/styling.html">Styling</a></li>
                    <li class="divider"></li>
                    <li><a href="/misc/faq.html">FAQ</a></li>
                    <li><a href="https://github.com/wyuenho/backgrid/releases">Change Log</a></li>
                    <li><a href="/misc/license.html">License</a></li>
                  </ul>
                </li>
              </ul>
              <ul id="social-media" class="nav navbar-nav navbar-right visible-md visible-lg">
                <li>
                  <a class="sprite-icons-gittip" href="https://www.gittip.com/wyuenho/" title="Gittip Me"></a>
                </li>
                <li>
                  <a class="sprite-icons-github" href="https://github.com/wyuenho/backgrid" title="Fork me on Github"></a>
                </li>

                <li>
                  <a href="https://twitter.com/share?url=http%3A%2F%2Fbackgridjs.com&amp;via=wong_jim&amp;hashtags=backgrid,backbonejs&amp;size=medium"
                     title="Share on Twitter"
                     onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=648,width=845');return false;"
                     class="sprite-icons-twitter"
                     ></a>
                </li>

                <li>
                  <a href="https://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Fbackgridjs.com"
                     title="Share on Facebook"
                     onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=368,width=605');return false;"
                     class="sprite-icons-facebook"
                     ></a>
                </li>

                <li>
                  <a href="https://plus.google.com/share?url=http%3A%2F%2Fbackgridjs.com&amp;annotation=inline"
                     title="Share on Google+"
                     onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');return false;"
                     class="sprite-icons-google"
                     ></a>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </header>
      <div class="container content">
        
    <div class="page-header">
      <h1>
        <a id="styling" href="#styling" title="Styling" class="section">Styling</a>
      </h1>
    </div>
    <div class="row">
      <div class="col-md-12">
        <p>Out of the box, Backgrid.js generates simple semantic HTML
          table elements that you can style with pure CSS. This section is
          only going to briefly describe some of the more important
          classes, and things that you should be aware of when
          styling.</p>

        <div class="row">
          <div class="col-md-6">
            <h2>
              <a id="-backgrid-container" href="#-backgrid-container" title=".backgrid-container" class="section">.backgrid-container</a>
            </h2>
            <p>This is the class that you should put into any container
              element that will hold the generated table. By default, it
              has a fixed maximum height and 100% width with no borders
              and paddings. It also serves as a <em>positioned</em>
              element so if you need to absolutely position any elements
              inside your custom table element classes, you can position
              them against this container.</p>
          </div>
          <div class="col-md-6">
            <h2>&nbsp;</h2>
            <textarea class="code-snippet" data-mode="css">
              .backgrid-container {
                position: relative;
                display: block;
                width: 100%;
                /* you may want to adjust this to fit a whole page */
                height: 494px;
                padding: 0;
                overflow: auto;
                border: 0;
              }</textarea>
          </div>
        </div>
        <div class="row">
          <div class="col-md-6">
            <h2>
              <a id="-backgrid" href="#-backgrid" title=".backgrid" class="section">.backgrid</a>
            </h2>
            <p>This is the class that will be applied to every Backgrid.js
              generated table. All other Backgrid.js default styles on
              table elements will only apply to descendents
              of tables of this class.</p>
            <textarea class="code-snippet" data-mode="css">
              /* Say you want to give some shiny gradient background colors
                 to your table header */
              .backgrid th {
                background-image: linear-gradient(#2F2727, #1a82f7);
              }

              /* Or maybe you enjoy zebra stripes */
              .backgrid tbody tr:nth-child(even) {
                background-color: #f9f9f9;
              }
            </textarea>
          </div>
          <div class="col-md-6">
            <h2>&nbsp;</h2>
            <p>Although usually unnecessary, if you want to completely
              remove all Backgrid.js styles, you can supply
              a <code>className</code> attribute to
              the <code>Backgrid.Grid</code> constructor:</p>
            <textarea class="code-snippet" data-mode="javascript">
              var grid = new Backgrid.Grid({
                className: "my-awesome-css-animated-grid",
                ...
              });</textarea>
          </div>
        </div>
        <div class="row">
          <div class="col-md-12">
            <h2>
              <a id="-backgrid----cell" href="#-backgrid----cell" title=".backgrid .*-cell" class="section">.backgrid .*-cell</a>
            </h2>
            <p>Every cell class Backgrid.js defines has a CSS class
              applied to them of the same, but dasherized name. The
              default styles apply a <code>text-align: left</code> to text
              cells and <code>text-align: right</code> to numeric and
              datetime cells.
            <p>See the relevant <a href="#api-cell">cell classes</a> for
              details.</p>
          </div>
        </div>
      </div>
    </div>
  
      </div>
    </div>
    <div id="layout-footer">
      <div class="container">
        <p class="text-muted">
          Copyright &copy; 2013 <a href="mailto:wyuenho@gmail.com" title="Jimmy
          Yuen Ho Wong">Jimmy Yuen Ho Wong</a> and contributors. Logo designed
          by <a href="http://kylerosenberg.com/" title="Kyle Rosenberg">Kyle
          Rosenberg</a>. <a href="/misc/license" title="License">MIT
          Licensed.</a>
        </p>
      </div>
    </div>
    
    <script type="text/javascript">
      var _gaq = _gaq || [];
      _gaq.push(['_setAccount', 'UA-36403214-1']);
      _gaq.push(['_setDomainName', 'backgridjs.com']);
      _gaq.push(['_setAllowLinker', true]);
      _gaq.push(['_trackPageview']);

      (function() {
        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
      })();
    </script>
    <script src="/build/build.min.js"></script>
    <script>
      $ = jQuery = require("jquery");
      require("bootstrap");
      require("select2");
      _ = require("underscore");
      Backbone = require("backbone");
      Backbone.$ = $;
      require("backbone-pageable");
      Backgrid = require("backgrid");
      require("backgrid-paginator");
      require("backgrid-filter");
      require("backgrid-select-all");
      require("backgrid-select2-cell");
      require("backgrid-moment-cell");
      require("backgrid-text-cell");
      require("codemirror");
      $(document).ready(function () {
        $("a[href^='/#'], a[href^='#']").click(function (e) {
          e.preventDefault();
          var target = this.hash;
          if (target) {
            var $target = $(target);
            $("html, body").stop().animate({
              "scrollTop": $target.offset().top - 55
            }, 500, "swing", function() {
              window.location.hash = target;
            });
          }
        });
      });
    </script>
    

    <script>
      require("backgridjs-com").setUpCodeMirror();
    </script>
  </body>
</html>

